<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>AUI快速完成布局</title>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
<style type="text/css">
html {
    _overflow: auto;
}
body {
  background-image: url(./image/background.jpg);
  background-size: cover;
  _width: expression_r(this.parentNode.clientWidth);
}

.slider{
  #ececec
  /*height: 290px;*/
  padding-bottom: 20px;
  min-height: 260px;
  background-color: #ececec;
  padding: 10px;
}
html,  body {
    height:100%;

}
header{
  min-height: 10%;
}

footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:50px;

}


</style>
</head>
  <body>
    <header>
        <header class="aui-bar aui-bar-nav">陌上花开</header>
    </header>


    <footer>
      <div class="aui-tab"  id="tab">
                <div class="aui-tab-item tapmode aui-active">手动模式</div>
                <div class="aui-tab-item tapmode">日照模式</div>
                <div class="aui-tab-item tapmode">闪电模式</div>
                <div class="aui-tab-item tapmode">设备选项</div>
      </div>
      </footer>

  </body>
<script type="text/javascript" src="./script/api.js" ></script>
<script type="text/javascript" src="./script/aui-tab.js" ></script>
<script type="text/javascript" src="./script/aui-dialog.js" ></script>
<script type="text/javascript" src="./script/echarts.js" ></script>
<script type="text/javascript" src="./script/MyLib.js" ></script>
<script type="text/javascript">

var dialog = new auiDialog();
    apiready = function(){
         api.parseTapmode();

         api.openFrame({
             name: 'Setting',
             url: './html/Setting.html',
             rect: {
                 x: 0,
                 y: header_h ,
                 w: 'auto',
                 h: total_h
             },
             pageParam: {
                 name: 'test'
             },
             bounces: false,
             bgColor: 'rgba(0,0,0,0)',
             vScrollBarEnabled: true,
             hScrollBarEnabled: true,
             type:'push'
         });

         api.openFrame({
             name: 'handmodel',
             url: './html/handmodel.html',
             rect: {
                 x: 0,
                 y: header_h ,
                 w: 'auto',
                 h: total_h
             },
             pageParam: {
                 name: 'test'
             },
             bounces: false,
             bgColor: 'rgba(0,0,0,0)',
             vScrollBarEnabled: true,
             hScrollBarEnabled: true,

         });

         api.setFrameAttr({
             name: 'Setting',
             hidden: true
         });
         api.setFrameAttr({
             name: 'clould',
             hidden: true
         });
    }

    var body_h = $api.offset($api.dom('body')).h;
    var header_h = $api.offset($api.dom('header')).h;
    var footer_h = $api.offset($api.dom('footer')).h;
    var total_h=body_h-footer_h-header_h;
    var tab = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        switch (ret.index) {
          case 1:
                api.setFrameAttr({
                    name: 'Setting',
                    hidden: true
                });
                api.setFrameAttr({
                    name: 'flash',
                    hidden: true
                });
                api.setFrameAttr({
                    name: 'clould',
                    hidden: true
                });
                api.setFrameAttr({
                    name: 'handmodel',
                    hidden: false
                });
            break;
          case 2:
                  api.setFrameAttr({
                      name: 'Setting',
                      hidden: true
                  });
                  api.openFrame({
                      name: 'clould',
                      url: './html/cloud.html',
                      rect: {
                          x: 0,
                          y: header_h ,
                          w: 'auto',
                          h: total_h
                      },
                      pageParam: {
                          name: 'test'
                      },
                      bounces: false,
                      bgColor: 'rgba(0,0,0,0)',
                      vScrollBarEnabled: true,
                      hScrollBarEnabled: true,
                      type:'push'
                  });
                  api.setFrameAttr({
                      name: 'handmodel',
                      hidden: true
                  });
                  api.setFrameAttr({
                      name: 'flash',
                      hidden: true
                  });
                  break;
          case 3:
                api.openFrame({
                    name: 'flash',
                    url: './html/flash.html',
                    rect: {
                        x: 0,
                        y: header_h ,
                        w: 'auto',
                        h: total_h
                    },
                    pageParam: {
                        name: 'test'
                    },
                    bounces: false,
                    bgColor: 'rgba(0,0,0,0)',
                    vScrollBarEnabled: true,
                    hScrollBarEnabled: true,
                    type:'push'
                });
                api.setFrameAttr({
                    name: 'handmodel',
                    hidden: true
                });
                api.setFrameAttr({
                    name: 'Setting',
                    hidden: true
                });
                api.setFrameAttr({
                    name: 'clould',
                    hidden: true
                });
                break;
          case 4:
                  api.setFrameAttr({
                      name: 'Setting',
                      hidden: false
                  });
                  api.setFrameAttr({
                      name: 'flash',
                      hidden: true
                  });
                  api.setFrameAttr({
                      name: 'clould',
                      hidden: true
                  });
                  api.setFrameAttr({
                      name: 'handmodel',
                      hidden: true
                  });
                  break;
          default:

        }
    });




</script>
</html>
